<template>
<!-- 	<popupview :hidden.sync='popup' position='bottom' :no-botton='false' :confirm-style='{color: "#fff", fontSize: "18px"}'>
	</popupview>	 -->
	<view class="main">
		<view class="personappraise">
			<view class="title">
				课堂评价
				<view class="myalert">
					满意请给五星哦
				</view>
				
			</view>
			<view class="line">
				<view class="mytitle">
					整体评价
				</view>
				<htz-rate v-model="ceshi0" style="width: 70%;"></htz-rate>
			</view>
			<view class="line">
				<view class="mytitle">教学评价</view>
				<htz-rate  v-model="ceshi1" style="width: 70%;"></htz-rate>
			</view>
			<view class="line">
				<view class="mytitle">过程评价</view>
				<htz-rate v-model="ceshi2" style="width: 70%;"></htz-rate>
			</view>
			<view class="line">
				<view class="mytitle">沟通评价</view>
				<htz-rate v-model="ceshi3" style="width: 70%;"></htz-rate>
			</view>
			<view class="line">
				<view class="mytitle">难度评价</view>
				<htz-rate v-model="ceshi4" style="width: 70%;"></htz-rate>
			</view>
			<view class="line">
				<view class="mytitle">课程评价</view>
				<htz-rate v-model="ceshi5" style="width: 70%;"></htz-rate>
			</view>
		</view>
		<view class="appraise">
			<view class="appraisecard borderradius">
			<textarea class="text borderradius" placeholder-style="color:#868181" placeholder="请输入你对本次服务的评价"/>
			</view>
		</view>
		<view class="submit">
			 <button type="primary" class="btnsubmit">提交</button>
		</view>
	</view>
</template>

<script> 
	import popupview from '../../components/x-popup/x-popup.vue'
	import unirate from '../../components/uni-rate/components/uni-rate/uni-rate.vue'
	import htzRate  from '../../components/htz-rate/htz-rate.vue'
	export default {
		data() {
			return {
				popup:false,
				 value: 2,
				  ceshi1: 0,
				  ceshi2: 0,
				  ceshi3: 0,
				  ceshi4: 0,
				  ceshi5: 0
			}
		},
		components:{
			popupview,
			unirate,
			htzRate
		},
		methods: {
			ceshiChange(val) {
			                uni.showToast({
			                    title: '你选择了' + val + '分',
			                    icon: 'none',
			                    duration: 2000
			                });
			            },
			 onChange(e) {
			            console.log('rate发生改变:' + JSON.stringify(e))
			        }
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
		
	}
	.main{
		margin-top: 20upx;
	}
	
	.personappraise{
		background-color: #FFFFFF;
		height: 45vh;
		.title{
			    text-indent: 0.9rem;
			    padding-top: 13px;
			    margin-bottom: 13px;
				.myalert{
					    position: fixed;
					    right: 20upx;						
						/* #ifdef H5 */
						top: 11%;
						/* #endif */
					    
					/* #ifdef APP-PLUS */
					top: 5%;
					/* #endif */
						bottom: 87%;
					    font-size: 26upx;
					    color: #bcb9b9;
				}
		}
		.line{
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			margin-bottom: 32upx;
		}
	}
.appraise{
border: 1px solid #FFFFFF;
    border-radius: 20upx;
    background-color: #FFFFFF;
    height: auto;
	padding: 30upx 0 20upx 0;
	margin-top: 20upx;
.appraisecard{
     width: 95%;
     margin: 0 auto;
     box-shadow: 0px 0px 9px #333;
	.text{
		    background-color: #FFFFFF;
		    margin: 0 auto;
		    top: 0.5vh;
			height: 22vh;
			width: 98%;
		    color: #868181;
			text-indent: 1rem;
			line-height: 1.5rem;
	}
}

}

.borderradius{
	border-radius: 10upx;
}
.submit{
	    position: fixed;
	    bottom: 10px;
	    width: 98%;
	    left: 1%;
}
</style>
